<template>
  <el-dialog :title="textMap[fillData.dialogStatus]" :visible.sync="fillData.inputsDialogShow" :width="device==='mobile'?'100%':'80%'" :fullscreen="device==='mobile'" @open="fillDialogOpen" @close="fillDialogClose" :close-on-click-modal="false">
    <template v-if="fillData.temp.status">
      <el-steps style="margin-bottom: 30px" :active="fillData.temp.fmActNumber" finish-status="success">
        <el-step v-if="fillData.temp.status!='disagree'" title="填报"></el-step>
        <el-step v-else title="退回" status="error"></el-step>
        <el-step title="审批中"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
    </template>
    <el-card class="box-card fill-panel-card">
      <div class="tool-bar">
        <el-date-picker
          v-model="fillData.temp.date"
          :disabled="fillData.dialogStatus=='update'"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
          :clearable="false"
          @change="dateChange"></el-date-picker>
        <el-button-group v-show="device!=='mobile'">
          <el-button  icon="el-icon-s-operation" @click="changeView(false)" style="color: white" :style="{'background-color':isListView?'#409EFF':'rgba(64,158,255,0.7)'}"></el-button>
          <el-button  :style="{'background-color':isListView?'rgba(64,158,255,0.7)':'#409EFF'}" style="color: white" @click="changeView(true)"><i class="el-icon-document"></i></el-button>
        </el-button-group>
      </div>
      <el-empty description="当前模块没有录入数据" v-if="!fillData.tabsData.length"></el-empty>
      <template v-if="!isListView">
        <el-tabs v-model="activeGroup" v-if="fillData.tabsData.length" v-loading="dateRefresh">
          <el-tab-pane v-for="(item, index) in fillData.tabsData" :key="index" :label="item.group_name" :name="item.group_name">
            <el-form  ref="dataForm" :label-position="device==='mobile'?'top':'left'" label-width="120px">
              <template v-if="device==='mobile'">
                <el-form-item>
                  <el-row>
                    <el-col :span="8" class="field-header-col"><span class="field-header-title">当前值</span></el-col>
                    <el-col :span="8" class="field-header-col"><span class="field-header-title">月累计</span></el-col>
                    <el-col :span="8" class="field-header-col"><span class="field-header-title">年累计</span></el-col>
                  </el-row>
                </el-form-item>
                <el-form-item v-for="(field, idx) in item.list" :key="idx" :label="field.alias" v-if="monthFieldShow(field.is_month)">
                  <el-row>
                    <el-col :span="8">
                      <el-tooltip :content="'单位:'+field.messure" effect="dark" placement="top-end">
                        <input class="fill-now-input" type="number" v-model.number="field.value" placeholder="请输入" />
                      </el-tooltip>
                    </el-col>
                    <el-col :span="8">
                      <el-tooltip :content="'单位:'+field.messure" effect="dark" placement="top-end">
                        <el-input type="number" v-model.number="field.month_value+field.value" readonly v-if="!field.is_count"/>
                      </el-tooltip>
                      <el-tooltip content="开启指标统计可查看年月累计值">
                        <el-input disabled v-if="field.is_count"/>
                      </el-tooltip>
                    </el-col>
                    <el-col :span="8">
                      <el-tooltip :content="'单位:'+field.messure" effect="dark" placement="top-end">
                        <el-input type="number" v-model.number="field.year_value+field.value"  readonly v-if="!field.is_count" />
                      </el-tooltip>
                      <el-tooltip content="开启指标统计可查看年月累计值">
                        <el-input disabled v-if="field.is_count"/>
                      </el-tooltip>
                    </el-col>
                  </el-row>
                </el-form-item>
              </template>
              <template v-else>
                <el-form-item>
                  <el-row :gutter="10">
                    <el-col :span="5" class="field-header-col"><span class="field-header-title">当前值</span></el-col>
                    <el-col :span="5" class="field-header-col"><span class="field-header-title">月累计</span></el-col>
                    <el-col :span="5" class="field-header-col"><span class="field-header-title">年累计</span></el-col>
                    <el-col :span="5" class="field-header-col"><span class="field-header-title">单位</span></el-col>
                  </el-row>
                </el-form-item>
                <el-form-item v-for="(field, idx) in item.list" :key="idx" :label="field.alias" v-if="monthFieldShow(field.is_month)">
                  <el-tooltip  :content="field.desc?`备注: ${field.desc}`:'备注: 无'" effect="light" placement="top-start">
                    <el-row :gutter="10">
                      <el-col :span="5">
                        <input class="fill-now-input" type="number" v-model.number="field.value" placeholder="请输入" />
                      </el-col>
                      <el-col :span="5">
                        <el-input type="number" v-model.number="field.month_value+field.value" readonly v-if="!field.is_count"/>
                        <el-tooltip content="开启指标统计可查看年月累计值">
                          <el-input disabled v-if="field.is_count"/>
                        </el-tooltip>
                      </el-col>
                      <el-col :span="5">
                        <el-input type="number" v-model.number="field.year_value+field.value"  readonly v-if="!field.is_count" />
                        <el-tooltip content="开启指标统计可查看年月累计值">
                          <el-input disabled v-if="field.is_count"/>
                        </el-tooltip>
                      </el-col>
                      <el-col :span="5">
                        <el-input v-model="field.messure" readonly />
                      </el-col>
                    </el-row>
                  </el-tooltip>

                </el-form-item>
              </template>
            </el-form>
            <el-alert title="每月最后一天显示按月录入指标" type="info" show-icon></el-alert>
          </el-tab-pane>
        </el-tabs>
      </template>
      <template v-else>
        <el-row style="width: 100%;margin-bottom: 10px" v-for="(item, index) in fillData.tabsData" :key="index" v-loading="dateRefresh">
          <el-col :span="24" style="margin:10px 0">
            <el-alert effect="dark" :title="item.group_name" type="info" :closable="false" />
          </el-col>
          <el-col :span="24">
            <el-form  ref="dataForm" :label-position="device==='mobile'?'top':'left'" label-width="120px">
              <template v-if="device==='mobile'">
                <el-form-item>
                  <el-row>
                    <el-col :span="8" class="field-header-col"><span class="field-header-title">当前值</span></el-col>
                    <el-col :span="8" class="field-header-col"><span class="field-header-title">月累计</span></el-col>
                    <el-col :span="8" class="field-header-col"><span class="field-header-title">年累计</span></el-col>
                  </el-row>
                </el-form-item>
                <el-form-item v-for="(field, idx) in item.list" :key="idx" :label="field.alias" v-if="monthFieldShow(field.is_month)">
                  <el-row>
                    <el-col :span="8">
                      <el-tooltip :content="'单位:'+field.messure" effect="dark" placement="top-end">
                        <input class="fill-now-input" type="number" v-model.number="field.value" placeholder="请输入" />
                      </el-tooltip>
                    </el-col>
                    <el-col :span="8">
                      <el-tooltip :content="'单位:'+field.messure" effect="dark" placement="top-end">
                        <el-input type="number" v-model.number="field.month_value+field.value" readonly v-if="!field.is_count"/>
                      </el-tooltip>
                      <el-tooltip content="开启指标统计可查看年月累计值">
                        <el-input disabled v-if="field.is_count"/>
                      </el-tooltip>
                    </el-col>
                    <el-col :span="8">
                      <el-tooltip :content="'单位:'+field.messure" effect="dark" placement="top-end">
                        <el-input type="number" v-model.number="field.year_value+field.value"  readonly v-if="!field.is_count" />
                      </el-tooltip>
                      <el-tooltip content="开启指标统计可查看年月累计值">
                        <el-input disabled v-if="field.is_count"/>
                      </el-tooltip>
                    </el-col>
                  </el-row>
                </el-form-item>
              </template>
              <template v-else>
                <el-form-item>
                  <el-row :gutter="10">
                    <el-col :span="5" class="field-header-col"><span class="field-header-title">当前值</span></el-col>
                    <el-col :span="5" class="field-header-col"><span class="field-header-title">月累计</span></el-col>
                    <el-col :span="5" class="field-header-col"><span class="field-header-title">年累计</span></el-col>
                    <el-col :span="5" class="field-header-col"><span class="field-header-title">单位</span></el-col>
                  </el-row>
                </el-form-item>
                <el-form-item v-for="(field, idx) in item.list" :key="idx" :label="field.alias" v-if="monthFieldShow(field.is_month)">
                  <el-tooltip  :content="field.desc?`备注: ${field.desc}`:'备注: 无'" effect="light" placement="top-start">
                    <el-row :gutter="10">
                      <el-col :span="5">
                        <input class="fill-now-input" type="number" v-model.number="field.value" placeholder="请输入" />
                      </el-col>
                      <el-col :span="5">
                        <el-input type="number" v-model.number="field.month_value+field.value" readonly v-if="!field.is_count"/>
                        <el-tooltip content="开启指标统计可查看年月累计值">
                          <el-input disabled v-if="field.is_count"/>
                        </el-tooltip>
                      </el-col>
                      <el-col :span="5">
                        <el-input type="number" v-model.number="field.year_value+field.value"  readonly v-if="!field.is_count" />
                        <el-tooltip content="开启指标统计可查看年月累计值">
                          <el-input disabled v-if="field.is_count"/>
                        </el-tooltip>
                      </el-col>
                      <el-col :span="5">
                        <el-input v-model="field.messure" readonly />
                      </el-col>
                    </el-row>
                  </el-tooltip>
                </el-form-item>
              </template>
            </el-form>
            <el-alert title="每月最后一天显示按月录入指标" type="info" show-icon></el-alert>
            <el-divider></el-divider>
          </el-col>
        </el-row>
      </template>

    </el-card>
    <div slot="footer" class="dialog-footer">
      <el-button @click="fillData.inputsDialogShow = false">取消</el-button>
      <el-button v-if="canFormSave"  type="primary" plain  @click="FillDataSubmit">保存</el-button>
      <el-button v-if="canFormSubmit"  type="primary"  @click="FillDataSubmit(false)">提交</el-button>
    </div>
  </el-dialog>

</template>

<script>
  import {mapGetters} from 'vuex'
  import {autoSaveInterval} from '@/utils/constants'
  import dailyApi from "@/api/daily_data"
  export default {
    name: "fillPanel",
    props:{
      fillData:{
        type:Object,
        required:true
      }
    },
    computed:{
      ...mapGetters([
        'device'
      ]),
      canFormSave(){
        return  !this.fillData.temp.status||this.canSubmitStats.indexOf(this.fillData.temp.status)>-1
      },
      canFormSubmit(){
        return !this.fillData.temp.status||this.canSubmitStats.indexOf(this.fillData.temp.status)>-1
      }
    },
    data(){
      return {
        autoTimer:null,
        dateRefresh:false,
        isListView:false,
        textMap: {
          update: '编辑录入',
          create: '新增录入'
        },
        activeGroup:'',
        canSubmitStats:['init','disagree']
      }
    },
    methods:{
       monthFieldShow(monthField){
         if (monthField){
           let isLastDay=()=>{
             const dateComps = this.fillData.temp.date.split('-')
             const choiceDay = dateComps[2]
             const choiceMonth = dateComps[1]
             const choiceYear = dateComps[0]
             const days = new Date(parseInt(choiceYear), parseInt(choiceMonth), 0).getDate()
             return parseInt(choiceDay) === days
           }
           if (!isLastDay())
              return false
         }
         return true
       },
       dateChange(val){
         if (this.fillData.dialogStatus==='create'){
           this.dateRefresh=true
           this.$emit('date-change',val)
         } else
           this.panelRefresh()
       },
       panelRefresh(){
         this.dateRefresh=true
         setTimeout(()=>{
           this.dateRefresh=false
         },200)
       },
       FillDataSubmit(temp_save=true,runRoop=false){
          if (!this.fillData.tabsData.length)
            return
          this.fillData.temp.type=temp_save?'save':'submit'
          let iptList=[]
          this.fillData.tabsData.forEach(tb=>iptList.push(...tb.list))
          this.fillData.temp.values = JSON.stringify(iptList)
          dailyApi.dailyInputStore(this.fillData.temp).then(res=>{
            this.fillData.temp.form_no=res.data.form_no
            if (runRoop){
              this.$notify.success("自动保存成功")
              return
            }
            this.$message.success("提交成功")
            this.fillData.inputsDialogShow=false
          })
       },
      fillDialogOpen(){
         this.isListView=false
         if (this.fillData.tabsData.length)
              this.activeGroup = this.fillData.tabsData[0].group_name
          this.autoTimer = setInterval(()=>{
            if (this.canFormSave)
              this.FillDataSubmit(true,true)
          },autoSaveInterval)
      },
      fillDialogClose(){
          clearInterval(this.autoTimer)
          this.autoTimer = null
          this.$emit('callback')
      },
      changeView(toTab){
         if (this.isListView===toTab)
          return
        this.isListView=toTab
      }
    }


  }
</script>

<style scoped lang="scss">
.tool-bar{
  width: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px
}
.field-header-title{
  margin-left: 10px;
}
.fill-now-input{
  width: 100%;
  height: 36px;
  padding-left: 5px
}
.fill-panel-card{
  min-height: calc(100vh - 300px);
}

</style>
